<template>
  <view class="main">
    <header-vue :back="true" title="申诉信息"> </header-vue>
    <view class="list">
      <view class="white-box" style="background: #fff; padding-bottom: 28rpx">
        <view class="flex start font30 fontbold-500">
          <image :src="IMAGE_URL+'/static/master/title-icon.png'" class="title-icon"></image>
          <view>问题详细说明</view>
        </view>
        <view class="content-box">
          <textarea v-model="textarea1" placeholder="请输入..."></textarea>
        </view>
        <view style="height: 28rpx"></view>
        <view class="flex start font30 fontbold-500">
          <image :src="IMAGE_URL+'/static/master/title-icon.png'" class="title-icon"></image>
          <view>证明材料</view>
        </view>
        <view>
          <view class="uploader">
            <view class="thumb" v-for="(img, idx) in images" :key="img.id">
              <image
                :src="img.path"
                mode="aspectFill"
                class="thumb-img"
              ></image>
              <view class="thumb-del" @click="removeImage(idx)">×</view>
            </view>
            <view
              class="add-tile"
              v-if="images.length < maxImages"
              @click="chooseImage"
            >
              <view class="camera-icon">
                <u-icon name="camera" size="30" color="#666"></u-icon>
              </view>
              <text class="add-text">上传照片</text>
            </view>
          </view>
        </view>
      </view>

      <view class="flex btn-buy" @click="submit()">提交</view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import numBoxVue from "../../views/shop/components/numBox.vue";
import { submitFeedback } from "@/api/index.js";
import appConfig from '@/config/app.js'

export default {
  data() {
    return {
   IMAGE_URL: appConfig.IMAGE_URL,
      params: {
        keyword: "",
      },
      textarea1: "",
      content_info: "",
      tabIndex: 0,
      value: "",
      showModal: false,
      images: [],
      maxImages: 9,
    };
  },
  components: {
    headerVue,
    numBoxVue,
  },
  mounted() {},
  methods: {
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
    submit() {
      let images = this.images.map((i) => {
        return i.path;
      });
      let data = {
        content: this.textarea1,
        contact_info: this.content_info,
        images: images.join(","),
        band_type: "member",
        type: "其他反馈",
      };
      submitFeedback(data).then((res) => {
        console.log(res);
        if (res.data.feedback_no) {
          uni.showToast({ title: "发布成功", icon: "none" });
          uni.navigateBack(1);
        }
      });
    },
    chooseImage() {
      const remaining = this.maxImages - this.images.length;
      if (remaining <= 0) return;
      const that = this;
      uni.chooseImage({
        count: remaining,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          const files = res.tempFiles || [];
          files.forEach((item) => {
            that.images.push(item);
          });
        },
      });
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
  },
  onLoad(options) {
    this.title = options.name == 0 ? "服务商家入驻" : "商城商家入驻";
  },
};
</script>
<style lang="scss" scoped>
.main {
  background: #f6f6f6;

  height: 100vh;
  box-sizing: border-box;
 

}

.list {
  padding: 0 32rpx 100rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.white-box {
  min-height: 200rpx;
  background: linear-gradient(180deg, #f5fbff 0%, #ffffff 12%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 40rpx 28rpx 0;
  box-sizing: border-box;
  margin-top: 28rpx;

  .content-box {
    width: 100%;
    height: 300rpx;
    background: #fafafa;
    border-radius: 12rpx;
    margin-top: 26rpx;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
  }

  .title-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .store-title {
    padding-bottom: 28rpx;
  }

  .iconfont {
    margin-right: 4rpx;
  }

  image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
}

.form-item {
  height: 118rpx;
  box-sizing: border-box;

  .icon-jiantou {
    margin-left: 8rpx;
    margin-right: 0;
  }

  .flex {
    width: 400rpx;
  }

  input {
    width: 100%;

    ::v-deep .input-placeholder {
      color: #aaaaaa;
    }
  }
}

.upload-img {
  width: 120rpx;
  height: 140rpx;
  border-radius: 8rpx;
  border: 1rpx solid #999999;
  position: absolute;
  left: 20rpx;
  bottom: 20rpx;
}
.uploader {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24rpx;
}
.thumb {
  position: relative;
  width: 148rpx;
  height: 160rpx;
  border-radius: 4rpx;
  overflow: hidden;
  margin-right: 25rpx;
  margin-bottom: 20rpx;
}

.thumb:nth-child(4n) {
  margin-right: 0;
}
.thumb-img {
  width: 100%;
  height: 100%;
  display: block;
}
.thumb-del {
  position: absolute;
  right: 6rpx;
  top: 6rpx;
  width: 20rpx;
  height: 20rpx;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.camera-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rpx;
}
.add-text {
  font-size: 24rpx;
  color: #999;
}
.add-tile {
  width: 148rpx;
  height: 160rpx;
  border-radius: 4rpx;
  background: #f8f8f8;
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}
.btn-buy {
  padding: 0 26rpx;
  height: 76rpx;
  border-radius: 60rpx;
  color: $uni-text-color-inverse;
  width: 100%;
  box-sizing: border-box;
  margin-top: 100rpx;
  background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
}
</style>
